<template>
  <div class="inform-remind">
    <div class="inform-button">
      <je-button size="small" type="text" @click="handlerInform">{{
        $t('informRemind.informTemplate')
      }}</je-button>
      <!-- <je-button size="small" type="text">{{ $t('informRemind.serveConfiguration') }}</je-button> -->
    </div>
    <div class="inform-checkbox">
      <je-form-item
        :label="$t('informRemind.remindTypes')"
        :label-col="{ span: 4 }"
        label-align="left"
        name="messages"
      >
        <je-checkbox-group v-model:value="formState.messages">
          <je-row>
            <je-col v-for="(item, index) in messageDatas" :key="index" :span="item.span">
              <je-checkbox :value="item.value">{{ item.label }}</je-checkbox>
            </je-col>
          </je-row>
        </je-checkbox-group>
      </je-form-item>
      <je-form-item
        v-if="pluginShow"
        :label="$t('informRemind.dingTalkConfig')"
        :label-col="{ span: 4 }"
        label-align="left"
        name="jeDingTalkName"
      >
        <je-input-select-grid
          v-model:value="formState.jeDingTalkName"
          id-property="JE_RBAC_DINGTALK_CONFIG_ID"
          :model="formState"
          config-info="JE_RBAC_DINGTALK_CONFIG,jeDingTalkId~jeDingTalkName,JE_RBAC_DINGTALK_CONFIG_ID~CONFIG_NAME,M"
        />
      </je-form-item>
    </div>
    <InformModal
      v-if="informShow"
      :message-definitions="formState.messageDefinitions"
      @updateData="updateData"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, onMounted, watch } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { Button, Checkbox, Form, InputSelect } from '@jecloud/ui';
  import InformModal from './modal/inform.vue';
  import { getMessageType } from '@/api/index';
  import { getSystemConfig } from '@jecloud/utils';

  export default defineComponent({
    name: 'InformRemind',
    components: {
      JeButton: Button,
      JeCheckbox: Checkbox,
      JeCheckboxGroup: Checkbox.Group,
      JeFormItem: Form.Item,
      JeRow: Row,
      JeCol: Col,
      InformModal,
      JeInputSelectGrid: InputSelect.Grid,
    },
    props: {
      messageSetting: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const pluginShow = getSystemConfig('variables')?.JE_WORKFLOW_PLUGIN_CONFIG_SHOW == '1';
      //表单数据
      const formState = ref(props.messageSetting);
      const messageDatas = ref([]);
      const informShow = ref(false);

      //点击通知模板按钮
      const handlerInform = () => {
        informShow.value = true;
      };

      const getMessageData = () => {
        getMessageType()
          .then((data) => {
            const rows = data.data,
              weLinkData = [];
            let messageData = [];
            rows.forEach((item) => {
              if (item.value == 'WELINK') {
                item.span = '9';
                weLinkData.push(item);
              } else {
                item.span = '8';
                messageData.push(item);
              }
            });
            if (weLinkData.length > 0) {
              messageData = messageData.concat(weLinkData);
            }
            messageDatas.value = messageData;
          })
          .catch((e) => {});
      };

      onMounted(() => {
        getMessageData();
      });

      const updateData = (type, data) => {
        informShow.value = false;
        if (type == 'ok') {
          formState.value.messageDefinitions = data;
        }
      };

      //主数据改变刷新数据
      watch(
        () => props.wfId,
        () => {
          formState.value = props.messageSetting;
        },
        { deep: true },
      );

      return { formState, handlerInform, messageDatas, updateData, informShow, pluginShow };
    },
  });
</script>

<style lang="less" scoped>
  .inform-remind {
    .inform-button {
      height: 32px;
      line-height: 32px;
      padding-left: 5px;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 6px;
    }
    .inform-checkbox {
      padding-left: 14px;
    }
  }
</style>
